
<template>
  <div class="code initializeRoll">
  
       <!-- 新增 弹窗-->
    <div v-if="uploadingShow" class="addTan">
      <section @click="uploadingClick(false)"></section>
      <div class="tan tan1">
        <p>
          <span>新增广告位</span>
          <el-button
            icon="el-icon-circle-close"
            circle
            @click="uploadingClick(false)"
          ></el-button>
        </p>
        <el-form ref="form" :model="form" label-width="90px">
          <el-form-item label="广告位名称">
            <el-input v-model="form.name"></el-input>
            <!-- <span class="Danger"
              ><i class="el-icon-warning-outline"></i>
              还剩余可创建广告位数为888条</span
            > -->
          </el-form-item>
        </el-form>

        <el-row>
          <el-col :span="2" :offset="18"
            ><el-button type="primary" size="mini" @click="jurisdictionClick"
              >确认</el-button
            ></el-col
          >
        </el-row>
      </div>
    </div>
    <!-- 快速新增  弹窗 -->
    <div v-if="uploadingShow1" class="addTan">
      <section @click="uploadingClick1(false)"></section>
      <div class="tan tan1">
        <p>
          <span>快速新增广告位</span>
          <el-button
            icon="el-icon-circle-close"
            circle
            @click="uploadingClick1(false)"
          ></el-button>
        </p>
        <el-form ref="form"  label-width="130px">
          <el-form-item label="快速新增广告位数">
            <el-input v-model="num"></el-input>
            <!-- <span class="Danger"
              ><i class="el-icon-warning-outline"></i>
              还剩余可创建广告位数为888条</span
            > -->
          </el-form-item>
        </el-form>

        <el-row>
          <el-col :span="2" :offset="18"
            ><el-button type="primary" size="mini" @click="jurisdictionClick"
              >确认</el-button
            ></el-col
          >
        </el-row>
      </div>
    </div>
    
    <!-- 实例化码 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      class="tanDialog"
    >
      <el-input
        v-model="inCodeNum"
        onkeyup="this.value=this.value.replace(/[^\d]/g,'') "
        placeholder="请输入内容"
      ></el-input>
      <p>最多可以实例化{{ maData.capItemCodeStateUsed || 0 }}个码</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="inCodeClick">确 定</el-button>
      </span>
    </el-dialog>

    <div class="topDiv">
      <div>
        <p class="title" style="display: flex;align-items: center;">
          <!-- <img src="../../../assets/images/wtb10.png" alt /> -->
          <span>码管理11</span>
        </p>

        <el-form ref="form" :model="form" label-width="80px" style="margin-top:10px">
          <el-row style="padding-right:20px">
            <el-col :span="5" >
              <el-form-item label="创建时间">
                <el-date-picker style="widht:100px" size="small" v-model="valueTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="系统ID">
                <el-input size="small" v-model="form.codeId" placeholder="请输入系统ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="标识">
                <el-input size="small" v-model="form.maBiaoShi" placeholder="码标识"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="名称">
                <el-input size="small" v-model="form.maName" placeholder="码名称ID"></el-input>
              </el-form-item>
            </el-col>
           
          </el-row>
		  <el-row style="padding-right:20px">
			  <el-col :span="5">
			    <el-form-item label="码链接">
			      <el-input size="small" v-model="form.maLianJie" placeholder="码链接"></el-input>
			    </el-form-item>
			  </el-col>   
		  	<el-col :span="5">
		  	  <el-form-item label="归属人">
		  	    <el-select size="small" v-model="form.userId" placeholder="请选择">
		  	      <el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value">
		  	      </el-option>
		  	    </el-select>
		  	  </el-form-item>
		  	</el-col>
		  	<el-col :span="5">
		  	  <el-form-item label="状态">
		  	    <el-select size="small" v-model="form.state" placeholder="请选择">
		  	      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
		  	      </el-option>
		  	    </el-select>
		  	  </el-form-item>
		  	</el-col>
		  	<el-col :span="5" v-for="(item,index) in textArr" :key="index">
		  	  <el-form-item :label="item.capItemCodeTextName">
		  	    <el-input v-model="item.capItemCodeTexttUpdatetime" :placeholder="item.capItemCodeTextName"></el-input>
		  	  </el-form-item>
		  	</el-col>
		  	<el-col :span="3" :offset="1">
		  	  <el-button native-type="reset" size="small" round  @click="reset" icon="el-icon-refresh">重置</el-button>
		  	  <el-button type="primary" size="small" icon="el-icon-search" round @click="seach">搜索</el-button>
		  	</el-col>
		  </el-row>
        </el-form>
        <!-- <i class="brI"></i> -->

      
     
        <el-row style="margin-top: 30px;margin-bottom: 10px;">
          <el-col align="right"  >
            
            <el-button
              size="mini"
              icon="el-icon-upload2"
              class="Brand"
              round
              @click="uploadingClick(true)"
            >
              新增
            </el-button>
            <el-button
              size="mini"
              icon="el-icon-download"
              class="Brand"
              round
              @click="uploadingClick1(true)"
            >
              快速新增
            </el-button>
          </el-col>
        </el-row>

        <template>
          <el-table :data="tableData" style="width: 100%"> 

               <el-table-column
              prop="capItemCodePoolBelongingOne"
              label="创建时间"
              align="center"
            />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
		  
        
						<el-table-column prop="codeMaLianJie" label="自定义链接" align="center" show-overflow-tooltip>
						  <template slot-scope="scope">
						    
									<el-dialog title="码链接" width="20%" :visible.sync="dialogTableVisible" >
									  <vue-qr
									    class="vue-qr"
									    :margin="0"
									    :text="scope.row.codeMaLianJie"
									    colorDark="#000"
									    colorLight="#fff"
									    :size="200"
									  />
									</el-dialog>
						  </template>
						</el-table-column>


            <el-table-column
              prop="code"
              label="状态"
              align="center"
            >
              <!-- <template slot-scope="scope">
                
              </template> -->
            </el-table-column>

            <el-table-column
              prop="capItemCodePoolBelongingOne"
              label="自定义文本"
              align="center"
            />
            <el-table-column
              prop="capItemCodePoolBelongingOne"
              label="系统ID"
              align="center"
            />
            <el-table-column
              prop="capItemCodePoolBelongingOne"
              label="识别名称"
              align="center"
            />


           <el-table-column
              prop="capItemCodePoolBelongingOne"
              label="操作"
              align="center"
            >
              <template slot="header">
                操作
                <el-popover placement="right" width="300" trigger="click">
                  <el-checkbox
                    v-for="item in dataHeader"
                    :key="item.codeKey"
                    v-model="item.bieName"
                    >{{ item.bieName }}</el-checkbox
                  >
                  <el-button slot="reference" type="text" icon="el-icon-edit">
                  </el-button>
                </el-popover>
              </template>
              <template slot-scope="scope">
                <el-button  @click="addItem1(scope.row.capItemCodeId)" type="text" round icon="el-icon-delete"
                  >划拨</el-button
                >
              
              </template>
            </el-table-column>

          </el-table>
        </template>

        <!-- 分页器 -->
        <el-row class="fye" style="margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            align="right"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>

   
  </div>
</template>

<script>
	
// 引入Excel插件
// import XLSX, { WorkSheet } from "xlsx";
export default {
	// components: {
	//   vueQr: vueQr,
	// },
  data() {
    return {
		dialogTableVisible:false,
      num:'',
      pageSize: 10, //每页多少
      pageSizes: [10, 50, 100, 200],
      options: [{
        value: '0',
        label: '已使用'
      }, {
        value: '1',
        label: '未分配'
      }, ],
      colData: [
        {
          title: "创建时间",
          istrue: true,
          data: "capItemCodePoolBelongingDistributionDate",
        },
        {
          title: "系统ID",
          istrue: true,
          data: "capItemCodePoolBelongingDistributionUserid",
        },
        { title: "广告位名称", istrue: true, data: "capItemCodeId" },
        { title: "广告位ID", istrue: true, data: "capItemCodeId1" },
        { title: "广告位链接", istrue: true, data: "capItemCodeId2" },
      ],
      /**
       * 表格动态
       */
      // 分页
      total: undefined,
      // 实例化码弹窗
      centerDialogVisible: false,
      // 实例化码个数
      inCodeNum: undefined,
      jurisdictionStatus: [
        {
          value: "0",
          label: "分配权限",
        }
        // {
        //   value: "1",
        //   label: "回收码",
        // },
      ],
      jurisdictionState: "0",
      jurisdictionAdd: "",
      jurisdictionRemove: "",
      jurisdictionValData: {},
      jurisdictionVal: "",
      jurisdictionObj: [],
      maData: {
      },
      // 数据弹窗数据
      titleObjData: [{}],
      // 数据弹窗title
      titleData: [],
      fileList: [],
      capItemDictionaries: "",
      // 权益ID字符串
      rigStringId: "",
      // 当前用户ID
      userId: 0,
      // 当前用户角色
      userJueSe: 0,
      //   上传数据弹窗
      uploadingShow: false,
      //   数据弹窗
      uploadingShow1: false,
     
      //   分页器
      currentPage: 5,
      // 管理的单选选中状态
      radio: 0,
      // 表单
      form: {
        cTime: '',
        eTime: '',
        id: '', //系统ID
        maBiaoShi: '', //广告位名称
        maLianJie: '', //广告位链接
        maName: '',
        proId: this.proId,
        pageNum: 1,
        pageSize: 10,
        state: '', //已使用1,0未分配
        wbList: [], //文本集合
        userId: '' //归属人
      },
      // 广告位名称
      input1: "",
      // 团队姓名
      input2: "",
      // 系统ID
      input3: "",
      // 广告位ID
      input4: "",
      // 创建时间
      valueTime: "",
      // 订单状态
      value2: "",
      options2: [

      ],
      // 表格
      tableData: [
        {code:"2"}
      ],
      dataHeader:[],
      textArr:[],//文本
      optionss: [], //归属人
      xqfpObj: {
        capItemCodeId: '', //数量
        capItemCodePoolBelongingDistributionUserid: '请选择', //分配人ID
        capItemCodePoolBelongingOne: '请选择', //状态
        capItemCodePoolBelongingUserid: this.userId, //所属人id
        capItemProjectId: this.proId //项目I
      },
	  seachStatus:0
    };
  },
  methods: {
    //删除
    addItem1(a){
      this.$confirm('此操作将删除此码, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
             }).then(() => {
               let data={
                 maId:a,
                 proId:this.proId
               }
               delMaCode(data).then((data) => {
                //  //console.log(data);
                 if (data.code == 200) {
                  this.userShilihuaChaXuns();
                 } else {
                   this.$message.error(data.msg)
                 }
               });
             }).catch(() => {
               this.$message({
                 type: 'info',
                 message: '已取消'
               });
             });
    },
    reset(){
      this.form.state = '';
      this.form.userId = '';
      this.form.maName = '';
      this.form.maLianJie = '';
	  this.form.maBiaoShi='';
      this.seachStatus = 1;
    },
    //搜索
    seach() {
      // //console.log(this.valueTime)
      if (this.valueTime) {
        this.form.cTime = this.valueTime[0]
        this.form.eTime = this.valueTime[0]
      } else {
        this.form.cTime = '';
        this.form.eTime = ''
      }

      this.userShilihuaChaXuns();
    },
    getUserByIdAndXiajiHebing(){
      getUserByIdAndXiajiHebing().then((data) => {
        // //console.log(data);
        if (data.code == 200) {
         this.optionss=data.data
        } else {
          this.$message.error(data.msg)
        }
      });
    },
    //获取文本项
    selectByCodeText(){
      let data={
        proId:this.proId
      }
      selectByCodeText(data).then((data) => {
        // //console.log(data);
        if (data.code == 200) {
         this.textArr=data.data
        } else {
          this.$message.error(data.msg)
        }
      });
    },
    //查询
    selectByZD() {
      let data = {
        proId: this.proId,
        type: 0
      }
      selectByZD(data).then((data) => {
        // //console.log(data.data);
        this.dataHeader = data;
        // for(var a=0;a<data.length;a++){
        //            this.tHeaders.push(data[a].bieName)
        //            this.filterVals.push(data[a].idName)
        //          }
      });
    },
    //实例化码
    shilihua(){
      // //console.log(this.$route)
        let data = {
          maName:this.form.name,
          num: this.num, // 分配数量/回收数量/回收实例化codeId
          projectId:this.proId, //分配人(下级id)
          // userId: 1, //	状态：0=分配 1=回收码 2=回收权限
        };
      shilihua(data).then((data)=>{
        // //console.log(data);
        if(data.code=200){
           this.$message.success(data.msg)
           this.form.name='';
           // this.uploadingClick(true)
           this.uploadingShow = false;
           this.uploadingShow1 = false;
           this.userShilihuaChaXuns();

        }
      })
    },
    //查询实例化
    userShilihuaChaXuns() {
      // this.form.userId=this.userId
      // //console.log(this.form)
        let arr=[]
              for(var a=0;a<this.textArr.length;a++){
                if(this.textArr[a].capItemCodeTexttUpdatetime){
                  let obj={
                  }
                  this.$set(obj,'capItemCodeTextId',this.textArr[a].capItemCodeTextId)
                  this.$set(obj,'capItemCodeTextName',this.textArr[a].capItemCodeTexttUpdatetime)
                  arr.push(obj)
                }
              }
              this.form.wbList=arr
			  if(this.seachStatus==1){
			  	// //console.log('888848')
			  	this.seachStatus=0;
			  	this.form.wbList=[];
			  }
              this.form.proId=this.proId
      selectByCodeSY(this.form).then((data) => {
        // //console.log(data.data);
        if(data.code==200){
          if(data.data){
            this.tableData = data.data.list;
            this.total = data.data.total
          }else{
             this.tableData =[];
          }
        }

      });
    },
    /**
     * 表格动态
     */
    // 分配码
    FenPeiCode() {
      let objData = {
        capItemCodeId: 0, // 分配数量/回收数量/回收实例化codeId
        capItemCodePoolBelongingDistributionUserid: 0, //分配人(下级id)
        capItemCodePoolBelongingOne: "string", //	状态：0=分配 1=回收码 2=回收权限

        capItemCodePoolBelongingUserid: this.userId, //所属人(上级id)
        capItemProjectId: this.proId, //项目id
        capItemRightsId: this.rigStringId, //权益id
      };
      // putCodeAssignment().then((data)=>{
      //   //console.log(data);
      // })
    },
    // 点击详情
    XiangQingClick() {
      this.$router.push({
        path: "codeXiangQing",
        query: {},
      });
    },
    uploadingClick(flag) {
      this.uploadingShow = flag;
    },
    uploadingClick1(flag) {
      this.uploadingShow1 = flag;
    },
 
    // 管理菜单的选中函数
    handleCommand(command) {
      this.radio = command;
    },
    // 分页器
    handleSizeChange(val) {
      // //console.log(`每页 ${val} 条`);
      this.form.pageSize = val;
      this.userShilihuaChaXuns();
    },
    handleCurrentChange(val) {
      // //console.log(`当前页: ${val}`);
      this.form.pageNum = val;
      this.userShilihuaChaXuns();
    },
    // 上传Excel
    handleChangefile(file, filelist) {
      // this.fullscreenLoading = true
      this.fileList.push(file.raw);
      this.updata();
    },
    // 上传Excel 发送请求
    updata() {
      this.setcapItemDictionaries("aa");
      const form = new FormData();
      form.append("file", this.fileList[0]);
      // timeDate
      // this.capItemDictionaries = new Date().toLocaleDateString().replace(/\//g, '-')
      // //console.log(this.capItemDictionaries);

      for (let key in this.capItemDictionaries) {
        form.append(key, this.capItemDictionaries[key]);
      }

      postReadExcelTemplate(form).then((res) => {
        if (res.code == 200) {
          this.getSelectAllFun(true);
          this.fileList = [];
          this.titleObjData = res.data[0]["bu重复"];
          this.titleObjData.push(...res.data[0]["重复"]);
          // this.$message.success(res.resultNote);
          // codeAdd
          //   this.$router.push({
          //   path: "codeAdd",
          //   query: {
          //     capItemRightsId:this.rigStringId ,
          //     data:JSON.stringify(res.data[0])
          //   },
          // });
        } else {
          this.uploadingClick(false);
          this.$message.error(res.resultNote);
          this.fileList = [];
        }
      });
    },
    // 上传地址返回空字符串
    UploadUrl() {
      return "";
    },
    // 上传Excel的数据
    setcapItemDictionaries(Name) {
      this.capItemDictionaries = {
        capItemDictionariesName: Name,
        capItemDictionariesType: 0,
        capItemDictionariesUserid: this.userId,
        capItemProjectId: this.proId,
        capItemRightsId: this.rigStringId, //权益
        dataAndMa: 0,
      };
    },
    // 查询码title 用作显示预上传
    getSelectAllFun(flag) {
      let idNum = undefined;
      if (this.userJueSe == 4) {
        idNum = this.userId;
      } else if (this.userJueSe == 2 || this.userJueSe == 3) {
        idNum = null;
      }
      let objData = {
        userId: idNum,
        rigId: this.rigStringId,
        proId: this.proId,
      };
      getSelectAll(objData).then((data) => {
        this.titleData = data;
        if (flag) {
          this.uploadingClick1(true);
          this.uploadingClick(false);
        }
      });
    },
    // 预上传确认
    affirmClick() {
      getAddCode(this.userId).then((data) => {
        if (data.code == 200) {
          this.uploadingClick1(false);
          this.$message.success(data.msg);

          this.getSelectBystateFun();
          this.getCapItemCodePoolBelongingVoFun();
        } else {
          this.$message.error(data.msg);
        }
        // //console.log(data);
      });
    },
  
    jurisdictionClicks() {
      this.xqfpObj.capItemCodePoolBelongingUserid = this.userId;
              this.xqfpObj.capItemProjectId=this.proId;
       putCodeAssignment(this.xqfpObj).then((data) => {
                  if (data.code == 200) {
                    this.uploadingClick2(false);
                    this.$message.success(data.msg);
                    this.xqfpObj.capItemCodeId='';
                    // 查询code列表
                    // 查询总计
                    this.selectByState();
                    this.getselectByCodeSY();
                  } else {
                    this.$message.error(data.msg);
                  }
                });
    },
    // 查询总计
    getSelectBystateFun(userId) {
      let objData1 = {
        userId: userId || this.userId,
        proId: this.proId,

      };
      // //console.log(objData1);
      // //console.log(objData1);
      getSelectBystate(objData1).then((data) => {
        if (data.data) {
          this.maData = data.data
        } else {
          this.maData.capItemRightsId = 0
        }
      });
    },
    // 查询code列表 函数
    postSelectAllCodeFun() {
      let objData = {
        capItemCodeUserid: this.userId,
        capItemProjectId: this.proId,
        capItemRightsId: this.rigStringId, //权益
      };
      // //console.log(objData);
      // postSelectAllCode(objData).then((data) => {
      // //console.log(data);
      // });
    },
    // 查询下级用户列表
    userSelectByParentUserInfoFun() {
      userSelectByParentUserInfo(this.userId).then((data) => {
        this.jurisdictionObj = data.rows;
      });
    },
    jurisdictionValChange(data) {
      this.getSelectBystateFun(data);
    },
    // 实例化码按钮
    inCodeClick() {
      if (this.inCodeNum > this.maData.capItemCodeStateUsed) {
        this.inCodeNum = this.maData.capItemCodeStateUsed;
      }
      let objData = {
        num: this.inCodeNum,
        projectId: this.proId,
        rightsId: this.rigStringId,
        // userId: this.userId,
      };
      putShilihua(objData).then((data) => {
        if (data.code == 200) {
          this.centerDialogVisible = false;
          this.inCodeNum = undefined;
          // 查询code列表
          // 查询总计
          this.getSelectBystateFun();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    uploadingClick3() {
      this.$router.push({
        path: "codeRecycle",
        query: {
          rigId: this.rigStringId,
        },
      });
    },
    // 生成Excel表格
    onExportExcel() {
      let arrayData = [this.titleData];
      this.tableData.forEach((item, index) => {
        let arrData = [];
        for (let k = 1; k <= this.titleData.length; k++) {
          // //console.log(k);
          arrData.push(item[`cap_item_code_${k}`]);
        }
        arrayData.push(arrData);
      });

      let aoa = arrayData;
      let worksheet = XLSX.utils.aoa_to_sheet(aoa);
      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");

      XLSX.writeFile(workbook, "当前码模板.xlsx");
    },
  },
  mounted() {
    // if(this.$route.params.itemsId.indexOf("huizong") >= 0 ) {
    // 	this.proId=this.$route.params.itemsId.slice(7)
    // }else{
    //   this.proId=this.$route.params.itemsId.slice(6)
    // }
    //  this.selectByCodeText();
    //  this.getUserByIdAndXiajiHebing();
    // getUserId().then((data) => {
    //   if (data.code == 200) {
    //     this.userId = data.data;
    //     this.selectByZD()
    //     //this
    //     this.getSelectBystateFun();
    //     // 获取列表记录
    //     this.userShilihuaChaXuns();

    //   }
    // });

  },
};
</script>


<style scoped lang="scss">
	.el-select{
		width: 100%;
  
	}
	.mgb20{
		margin: 15px 0!important;
	}
	  .el-card{
		 box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		 border-radius: 10px;
	  }
	  .el-card:hover{
	  		 box-shadow: 0 4px 12px 0 #d7e3fd;
	  }
.code {
      // border: 1px red solid;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  padding: 20px;
  height: 100vh;
  #chart1,
  #chart2 {
    width: 100%;
    height: 300px;
  }

  .divDiv {
    display: inline-block;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.082);
    .divFlex {
      display: flex;
      justify-content: space-between;
      color: #888;
      font-size: 20px;
      b {
        color: #333;
      }
    }
  }
  .addTan {
    .tan1 {
      // width: 500px;
      // height: 430px;
      border-radius: 10px;
      padding: 20px 45px;
      .but {
        margin-top: 30px;
        // display: flex;
        // justify-content: space-around;
        // padding: 0 50px;
        text-align: right;
        // span {
        //   // font-size: 25px;
        // }
      }
    }
    .tan2 {
      max-width: 1300px;
    }
  }
  .PFlex {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14px;
    }
    b {
      font-weight: 200;
    }
  }
  .PFlexNo {
    position: relative;
    top: 8px;
    font-size: 14px;
    input {
      width: 50px;
      border: none;
      border-bottom: 1px solid rgb(204, 209, 204);
      outline: none;
      padding-left: 5px;
    }
  }
}
</style>
<style lang="scss">
.code {
  .tanDialog {
    & > div {
      border-radius: 10px;
    }
  }
  .user-avators {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
  }
  .common-flex {
    display: flex;
    align-items: center;
  }
  .mb8 {
    margin: 20px 0;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
